<template>
    <div class="detail_module_panel other_info">
        <h3 id="work_student" class="detail_panel_title detail_panel_title_icon other_info_icon">{{$t('common.materialInfo')}}</h3>
        <div class="panel_info_content">
            <el-row v-for="(item,index) in userData.accountList" class="row" :key="index">
                <el-row class="row">
                    <el-col class="label" :span="4">{{$t('common.withdrawalChannel')}}{{ index + 1 }}</el-col>
                    <el-col class="info" :span="20">
                        <span style="margin:0 40px 0 0;"> {{ item.accountType | SwitchLoanChannel }}</span>
                        <span v-if="['5','6','7','8','15'].includes(item.accountType)" style="margin:0 40px 0 0;"><span class="label">{{$t('common.withdrawalAccount')}}</span>{{ item.account }}</span>
                        <span v-if="item.accountType === '5'"><span class="label">{{$t('common.bankName')}}</span>{{ item.bankName }}</span>
                    </el-col>
                </el-row>
            </el-row>
            <el-row class="row">
                <el-col class="label" :span="4">{{$t('common.idInfoCollect')}}</el-col>
                <el-col class="info" :span="20">
                    <ul class="imgs">
                        <li>
                            <!--医保卡-->
                            <a @click="showImg(userData.philHealthImg)" :style="backgroundImg(userData.philHealthImg)" href="javascript:void(0);"></a>
                            <span class="img_desc">{{$t('common.philhealth')}}</span>
                        </li>
                        <li>
                            <!--劳保卡-->
                            <a @click="showImg(userData.pagibigImg)" :style="backgroundImg(userData.pagibigImg)" href="javascript:void(0);"></a>
                            <span class="img_desc">{{$t('common.pagbig')}}</span>
                        </li>
                                             <li>
                            <!--pRC-->
                            <a @click="showImg(userData.orcImg)" :style="backgroundImg(userData.orcImg)" href="javascript:void(0);"></a>
                            <span class="img_desc">PRC ID</span>
                        </li>
                        <li>
                            <!--OWWA-->
                            <a @click="showImg(userData.owwaImg)" :style="backgroundImg(userData.owwaImg)" href="javascript:void(0);"></a>
                            <span class="img_desc">OWWA ID</span>
                        </li>
                    </ul>
                </el-col>
            </el-row>
            <el-row class="row">
                <el-col class="label" :span="4">&nbsp;</el-col>
                <el-col class="info" :span="20">
                    <ul class="imgs">
                        <li>
                            <!--TIN-->
                            <a @click="showImg(userData.tinImg)" :style="backgroundImg(userData.tinImg)" href="javascript:void(0);"></a>
                            <span class="img_desc">TIN ID</span>
                        </li>
                        <li>
                            <!--驾照-->
                            <a @click="showImg(userData.driverImg)" :style="backgroundImg(userData.driverImg)" href="javascript:void(0);"></a>
                            <span class="img_desc">{{$t('common.driverLicense')}}</span>
                        </li>
                        <li>
                            <!--others-->
                            <a @click="showImg(userData.othersImg)" :style="backgroundImg(userData.othersImg)" href="javascript:void(0);"></a>
                            <span class="img_desc">{{ $t('common.others') }}</span>
                        </li>
                    </ul>
                </el-col>
            </el-row>
        </div>
        <show-image-video :visible.sync="showImgDialog" :video-src="videoUrl" :img-src="imgUrl">图片展示</show-image-video>

        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>

<script>
    import uploadImage from '@/components/upload-image';
    import ShowImageVideo from '@/components/show-image-video';

    export default {
        name: 'otherInfo',
        props: {
            userData: {
                type: Object
            },
            userId: {
                default: ''
            },
            userBioassayInfo: {
                type: Object,
                default() {
                    return {};
                }
            }
        },
        components: {
            ShowImageVideo,
            uploadImage
        },
        data() {
            return {
                dialogImageUrl: '',
                dialogVisible: false,
                showImgDialog: false,
                imgUrl: '',
                videoUrl: '',
                imgObj: {
                    id: '',
                    url: '',
                },
                imgObjTwo: {
                    id: '',
                    url: '',
                },
                cardPositiveImg: '',
                cardNegativeImg: '',
                userOrderBankInfo: {},
            };
        },
        watch: {
            'imgObj.url'(val) {
                if (val) {
                    this.changeImg();
                }
            },
            'imgObjTwo.url'(val) {
                if (val) {
                    this.changeImg();
                }
            },
        },
        methods: {
            backgroundImg(url) {
                // 构造图片展示
                const style = {};
                if (url) {
                    style.backgroundImage = 'url("' + url + '")';
                }
                return style;
            },
            showImg(url, video) {
                if (video && url) {
                    this.videoUrl = url;
                    // this.videoUrl = 'http://www.w3school.com.cn/i/movie.ogg';
                    this.imgUrl = '';
                    this.showImgDialog = true;
                } else if (!video && url) {
                    this.showImgDialog = true;
                    this.imgUrl = url;
                    this.videoUrl = '';
                }
            },
            // 添加图片
            changeImg() {
                const params = {
                    cardPositiveImg: this.imgObj.url,
                    cardNegativeImg: this.imgObjTwo.url,
                    userId: this.userId,
                    userType: '1',
                };
                this.$api.customer.addUserCardInfo(params).then((res) => {
                    const {status, data} = res;
                    if (status === '1') {
                        //
                    }
                });
            },
            // 用户下单时的收款账户信息
            findUserOrderBankInfo() {
                return;
                const param = {
                    userId: this.userId,
                    orderId: this.orderId,
                };
                this.$api.customer.findUserOrderBankInfo(param).then((res) => {
                    const { status, data } = res;
                    if (status === '1' && data) {
                        this.userOrderBankInfo = data || {};
                        if (data.accountId) {
                            this.showBankInfo(data.accountId);
                        }
                    }
                });
            },
        },
        created() {
            if (this.$route.params.id) {
                this.orderId = this.$route.params.orderId;
            }
        }
    };
</script>

<style lang="scss" scoped>
    .video {
        /*background-color: rgba(0, 0, 0, 0.4)!important;*/
    }

    .video_placeholder {
        background-image: url("~@/assets/img/vidoe_placeholder.png");
        background-repeat: no-repeat;
        /*background-position: 50% -20px!important;*/
        background-size: contain !important;
        background-color: #fff !important;
    }

    .video_icon {
        display: block;
        height: 100%;
        width: 100%;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 32px 32px;
        background-image: url("~@/assets/img/icon_video.png");
    }

    .el-table .red_color {
        color: #FF4949;
    }

    .blue {
        margin-left: 10px;
        color: #1983fa;
        font-weight: bold;
    }

    .color_red {
        color: #ff3b30;
    }
</style>
